<template>
  <Card :title="online? eco ? 'ECO电商订单记录' : 'B2C电商订单记录' : '门店订单记录'" line :class="$style.orderRecord">
    <template v-slot:right>
      <Button v-if="online" type="primary" @click="toOnlineShop">电商订单查询</Button>
      <Button v-else type="primary" @click="toOfflineShop">门店订单查询</Button>
    </template>
    <div>
      <table-box
        v-if="online"
        ref="table"
        :other-filters="otherFilters"
        no-request
        ::table-row-key="tableRowKey"
        :table-config="tableConfig"
        :table-height="140"
        @data-change="dataChange"
      />
      <table-box
        v-else
        ref="table"
        :other-filters="otherFilters"
        no-request
        ::table-row-key="tableRowKey"
        :table-config="tableConfigRetail"
        :table-height="140"
        @data-change="dataChange"
      />
    </div>
  </Card>
</template>
<script>
import Card from '@/components/Card'
import { parseTime } from '@/utils'
import { filtersRaw } from '@/utils'
export default {
  name: 'DisplayOrderRecord',
  components: {
    Card
  },
  props: {
    callTel: {
      type: String,
      default: ''
    },
    callid: {
      type: String,
      default: ''
    },
    recordId: {
      type: String,
      default: ''
    },
    online: {
      type: Boolean,
      default: false
    },
    eco: { // ECO电商订单
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      otherFilters: [],
      tableData: [], // 当前列表数据
      tableConfig: {
        // sourceSystem 0:B2C 1:ECO
        interfacePath: this.eco ? `/call-center/api/v1/mscInfo/eco/order/listByPhone?receiverPhone=${this.callTel}` : `/call-center/api/v1/mscInfo/b2c/order/list?receiverPhone=${this.callTel}`,
        pageFlag: true,
        hideFuncBar: true,
        tabIndex: 16,
        pageSize: 5,
        tablePage: [5, 10, 20, 30, 50, 100],
        // 表格字段动态配置
        setting: [
          {
            label: '序号',
            maxWidth: 80,
            align: 'center',
            formatData(v) {
              return v.keyIndex + 1
            }
          },
          {
            prop: 'pcode',
            label: '订单编号',
            minWidth: 130,
            render: (_, row) => {
              return (
                <Button type='text' onClick={this.orderClick.bind(this, row)}>
                  {row.pcode}
                </Button>
              )
            }
          },
          {
            prop: 'orderReceiverName',
            label: '顾客姓名'
          },
          {
            prop: '',
            label: '购买渠道',
            formatData: () => '电商'
          },
          {
            prop: 'platformName',
            label: '电商平台'
          },
          {
            prop: 'storeName',
            label: '电商店铺'
          },
          {
            prop: 'billStatus',
            label: '订单状态', // 01’：暂存，‘02’：未处理，‘03’：未审核，‘04’：已审核
            // formatData: this.orderStatus
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'MSC_ORDER_STATUS'
            }
          },
          {
            prop: 'creationTime',
            label: '购买时间',
            formatData(row) {
              const time = row.sourceSys === 'eco' ? row.orderDate : row.creationTime
              return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
            }
          },
          {
            prop: 'operation',
            label: '操作',
            align: 'center',
            render: (_, row) => {
              return (
                <Button type='primary' disabled={row.disabled} onClick={this.relevance.bind(this, row)}>关联</Button>
              )
            }
          }
        ]
      },
      tableConfigRetail: {
        interfacePath: `/call-center/api/v1/topInfo/retailOrders?contactNumber=${this.callTel}&size=5`,
        pageFlag: true,
        hideFuncBar: true,
        tabIndex: 17,
        pageSize: 5,
        tablePage: [5, 10, 20, 30, 50, 100],
        // 表格字段动态配置
        setting: [
          {
            label: '序号',
            maxWidth: 80,
            align: 'center',
            formatData(v) {
              return v.keyIndex + 1
            }
          },
          {
            prop: 'saleOrderCode',
            minWidth: 130,
            label: '订单编号',
            render: (_, row) => {
              return (
                <Button type='text' onClick={this.orderClick.bind(this, row)}>
                  {row.saleOrderCode}
                </Button>
              )
            }
          },
          {
            prop: 'customerName',
            label: '顾客姓名'
          },
          {
            prop: '',
            label: '购买渠道',
            formatData: () => '门店'
          },
          {
            prop: 'officeName',
            label: '办事处'
          },
          {
            prop: 'storeName',
            label: '门店'
          },
          {
            prop: 'status',
            label: '订单状态', // 01’：暂存，‘02’：未处理，‘03’：未审核，‘04’：已审核
            // formatData: this.orderStatus
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'TOP_ORDER_STATUS'
            }
          },
          {
            prop: 'orderType',
            label: '订单类型', // 01’：暂存，‘02’：未处理，‘03’：未审核，‘04’：已审核
            // formatData: this.orderStatus
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'TOP_ORDER_TYPE'
            }
          },
          {
            prop: 'formmakerTime',
            label: '购买时间'
            // formatData(row) {
            //   return parseTime(row.creationTime, '{y}-{m}-{d} {h}:{i}:{s}')
            // }
          },
          {
            prop: 'operation',
            label: '操作',
            align: 'center',
            render: (_, row) => {
              return (
                <Button type='primary' disabled={row.disabled} onClick={this.relevance.bind(this, row)}>关联</Button>
              )
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 订单额外查询条件生成
    initData() {
      // if (!this.callTel) return
      // if (!/^1\d{10}$/.test(this.callTel)) return // 不是电话号码不查询订单
      const otherFilters = [
        filtersRaw('orderReceiverPhone', this.callTel, '=')
        // filtersRaw('receiverPhone', this.callTel, 'like')
      ]
      this.otherFilters = otherFilters
      this.$nextTick(() => {
        this.$refs.table.initTableData()
      })
    },
    // 电商订单查询
    toOnlineShop() {
      this.$router.push({ name: 'InfoDataGoods', query: { callTel: this.callTel }})
    },
    // 门店订单查询
    toOfflineShop() {
      this.$router.push({ name: 'InfoDataShopRetail', query: { callTel: this.callTel }})
    },
    // 订单状态
    orderStatus({ billStatus }) {
      let t = ''
      // ‘01’：暂存，‘02’：未处理，‘03’：未审核，‘04’：已审核，
      // ‘05’：已分拨，‘06’：已发货，‘07’：已完成，‘08’：已关闭，
      // ‘10’：不处理
      switch (billStatus) {
        case '01':
          t = '暂存'
          break
        case '02':
          t = '未处理'
          break
        case '03':
          t = '未审核'
          break
        case '04':
          t = '已审核'
          break
        case '05':
          t = '已分拨'
          break
        case '06':
          t = '已发货'
          break
        case '07':
          t = '已完成'
          break
        case '08':
          t = '已关闭'
          break
        case '10':
          t = '不处理'
          break
      }
      return t
    },
    // 获取当前表格数据
    dataChange(data) {
      try {
        this.tableData = data.data.records
        this.tableData.forEach(e => {
          this.$set(e, 'disabled', false)
        })
      } catch (error) {
        this.tableData = []
      }
    },
    // 关联
    relevance(row) {
      this.tableData.forEach(e => { e.disabled = false })
      // row.disabled = true
      this.$set(row, 'disabled', true)
      this.$emit('relevance', row, this.online, this.eco)
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },
    // 清空关联状态
    clearRelevance() {
      // this.tableData.forEach(e => { e.disabled = false }) // 缓存导致页面不会更新
      this.initData() // 直接重新获取数据
    },
    // 跳转到对应订单详情页
    orderClick(row) {
      if (this.online) {
        const sourceSystem = this.eco ? '1' : '0'
        this.$router.push({ name: 'InfoDataGoods', query: { id: row.id, callTel: this.callTel, sourceSystem: sourceSystem }})
      } else {
        this.$router.push({ name: 'ShopRetailDetail', query: { saleOrderCode: row.saleOrderCode, callTel: this.callTel }})
      }
    },
    // key
    tableRowKey(row) {
      return row.id || (Math.random() * 0xfffff).toString(16)
    }
  }
}
</script>
<style lang='scss' module>
.orderRecord{
  div[class*="pagination-container"]{
    margin-bottom: 0 !important;
  }
}
</style>
